<template>
	<view class="layer">
		<comHeader class="bgc" :config="navConfig" />
		<view class="headIcon">
			<navigator>
				<navigator url="/pages/my/myEdit/myedit"><image src="/static/myPic/xiuGai.png"></image><i>修改</i></navigator>
				<navigator  url="/pages/my/mySet/set"><image class="shezhi" src="../../../static/myPic/shezhiluosi.png"></image></navigator> 
			</navigator>
			<view class="touxiang">
				<image src="/static/myPic/touXiang.png" mode=""></image>
			</view>
			<view class="nicheng">昵称</view>
			<view class="jifen">
				<navigator url="">65320</navigator>
				<view class="jfen">积分</view>
			</view><br>
			<view class="CZzhi">成长值</view>
		</view>
		<!-- 图标区域1 -->
		<view class="icon1">
			<text class="bibei">票务订单</text>
			<view class="item1">
				<navigator url="/pages/my/myOrder/orders?state=0">
					<view>
						<image src="/static/myPic/dingDan.png" mode=""></image>
					</view>
					<i>全部订单</i>
				</navigator>
			</view>
			<view class="item2">
				<navigator url="/pages/my/myOrder/orders?state=1">
					<view>
						<image src="/static/myPic/fuKuan.png" mode=""></image>
					</view>
					<i>待付款</i>
				</navigator>
			</view>
			<view class="item3">
				<navigator url="/pages/my/myOrder/orders?state=2">
					<view>
						<image src="/static/myPic/chuXing.png" mode=""></image>
					</view>
					<i>待使用</i>
				</navigator>
			</view>
			<view class="item4">
				<navigator url="/pages/my/myOrder/orders?state=3">
					<view>
						<image src="/static/myPic/pingJia.png" mode=""></image>
					</view>
					<i>待评价</i>
				</navigator>
			</view>
			<view class="item5">
				<navigator url="/pages/my/myOrder/orders?state=4">
					<view>
						<image src="/static/myPic/tuiKuan.png" mode=""></image>
					</view>
					<i>退款</i>
				</navigator>
			</view>
		</view>


		<!-- 电商区域4 -->
		<view class="icon4">
			<text class="bibei">电商订单</text>
			<view class="list">
				<view class="item" v-for="(item,index) in iconData4" :key='index' @tap="jumps(index,item)">
					<!-- <navigator :url="item.url"> -->
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
					<!-- </navigator> -->
				</view>
			</view>
		</view>
		<!-- 图标区域2 -->
		<view class="icon2">
			<text class="bibei">必备</text>
			<view class="list">
				<view class="item" v-for="(item,index) in iconData2" :key='index' @tap="jump(index,item)">
					<!-- <navigator :url="item.url"> -->
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
					<!-- </navigator> -->
				</view>
			</view>
		</view>
		<!-- 图标区域3 -->
		<view class="icon2 icon3">
			<text class="bibei">其他</text>
			<view class="list">
				<view class="item" v-for="(item,index) in iconData3" :key='index'>
					<navigator :url="item.url">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</navigator>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import FootMenu from '@/components/footMenu.vue'
	export default {
		data() {
			return {
				navConfig: {
					backgroundColor: 'transparent',
					color: '#fff',
					common: {
						hasSearch: false,
						hasMenu: false,
						hasTitle: false,
						minHead: true,
					},
					left: {
						img: '',
						text: '',
						backToUrl: '/pages/gonglue/gonglue'
					},
					mid: {
						title: '',
						hasSearchMid: true
					},
					right: {

					}
				},
				iconData2: [
					{
						name: '实名认证',
						url: '../myRealName/realName',
						img: '/static/myPic/shiMingRenZheng.png'
					},
					{
						name: '银行卡',
						url: '../myBankCard/clickOne',
						img: '/static/myPic/yinHangKa.png'
					},
					{
						name: '购票信息',
						url: '/pages/my/myTicket/ticketMessage',
						img: '/static/myPic/gouPiaoXinXi.png',
					},
					{
						name: '我的地址',
						url: '../myAddress/myAddress2/address2',
						img: '/static/myPic/diZhi.png'
					},
					// {
					// 	name: '电商订单',
					// 	url: '../../home/shop/shopOrder',
					// 	img: '/static/myPic/dianshangdingdan.png'
					// },
					
				],
				iconData3: [{
						name: '排队码',
						url: '../myLineUp/lineUp',
						img: '/static/myPic/paiduima.png'
					},
					{
						name: '我的账单',
						url: '../myBill/mybill',
						img: '/static/myPic/zhangDan.png'
					},
					{
						name: '我的成就',
						url: '../myChengjiu/chengJiu',
						img: '/static/myPic/chengJiu.png'
					},
					{
						name: '我的足迹',
						url: '../myFoot/foot',
						img: '/static/myPic/zuJi.png'
					},
					{
						name: '我的收藏',
						url: '../myCollection/collection',
						img: '/static/myPic/shouCang.png'
					},
					{
						name: '合作加盟',
						url: '../join/shopJoin/shopjoin',
						img: '/static/myPic/jiaMeng.png'
					},
					{
						name: '会员中心',
						url: '',
						img: '/static/myPic/vip.png'
					},
					{
						name: 'SOS',
						url: '',
						img: '/static/myPic/sos.png'
					},
					{
						name: '上报POI点',
						url: '/pages/my/myPOI/myPOI',
						img: '/static/myPic/POI.png'
					},
					{
						name: '离线地图',
						url: '/pages/my/myOfflineMap/cityList',
						img: '/static/myPic/lixianMap.png'
					},
				],
				iconData4: [
					{
						name: '待付款',
						url: '../../home/shop/shopOrder?state=1',
						img: '/static/myPic/ds-fukuan.png'
					},
					{
						name: '待发货',
						url: '../../home/shop/shopOrder?state=2',
						img: '/static/myPic/ds-fahuo.png'
					},
					{
						name: '待收货',
						url: '../../home/shop/shopOrder?state=3',
						img: '/static/myPic/ds-shouhuo.png'
					},
					{
						name: '待评价',
						url: '../../home/shop/shopOrder?state=4',
						img: '/static/myPic/ds-pingjia.png'
					},
					{
						name: '待退款',
						url: '../../home/shop/shopOrder?state=5',
						img: '/static/myPic/ds-tuikuan.png'
					},
					
				],
			}
		},
		components: {
			FootMenu
		},
		computed: {
			rootHeight() {
				return global.winHeight
			},

		},
		methods: {
			jump(index, item) {
				if (index == 1) {
					uni.showModal({
						title: ' ',
						content: '当前账户暂未实名认证，请点击确定前往实名认证',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "../myRealName/realName"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: item.url
					})
				}

			},
			jumps(index, item) {
				if (index == 1) {
					uni.navigateTo({
						url: item.url
					})
					// uni.showModal({
					// 	title: ' ',
					// 	content: '当前账户暂未实名认证，请点击确定前往实名认证',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: "../myRealName/realName"
					// 			})
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	i {
		font-style: normal;
	}

	.layer {
		width:100%;
		background-color: #F6F6F6;
	}

	.bgc {
		position: absolute;
		width: 750upx;
		height: 355upx;
		background-image: linear-gradient(to right, #54B0FF, #5773FE);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5773FE', endColorstr='#54B0FF', GradientType=1);
		border-radius: 0 0 60upx 60upx;
	}

	.headIcon {
		position: relative;
	}

	.headIcon image {
		width: 20upx;
		height: 22upx;
		margin-left: 580upx;
		margin-top: 99upx;
		float: left;
	}

	.headIcon i {
		width: 55upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #FFFFFF;
		margin-left: 14upx;
		margin-top: 90upx;
		float: left;
	}

	.headIcon .shezhi {
		width: 40upx;
		height: 40upx;
		opacity: 1;
		margin-left: 20upx;
		margin-top: 90upx;
		float: left;
	}

	.touxiang image {
		float: left;
		width: 120upx;
		height: 120upx;
		margin-left: 64upx;
		margin-top: 30upx;
	}

	.nicheng {
		float: left;
		width: 70upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #FFFFFF;
		margin-top: 20upx;
		margin-left: 78upx;
	}

	.jifen {
		float: left;
		width: 200upx;
		height: 30upx;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: #FFFFFF;
		margin-top: 70upx;
		margin-left: -70upx;
	}

	.jifen navigator {
		width: 100upx;
		height: 27upx;
		float: left;
	}

	.jifen .jfen {
		width: 65upx;
		height: 27upx;
		float: left;
	}

	.CZzhi {
		width: 100upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #fff;
		margin-top: 120upx;
		margin-left: -200upx;
		float: left;
		margin-bottom: 50upx;
	}

	/* 图标区域1 */
	.icon1 {
		margin-top: 268upx;
		margin-left: 29upx;
		width: 690upx;
		height: 220upx;
		background: rgba(254, 254, 254, 1);
		box-shadow: -0.419upx 5.985upx 9upx 0upx rgba(221, 222, 224, 0.48);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		border-radius: 10upx 10upx 0 0;
	}
	.icon1 .bibei{
		/* float: left; */
		position: absolute;
		width: 100%;
		height: 50upx;
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: #333333;
		margin-left: 19upx;
		margin-top: -70upx;
	}

	.icon1>view {
		width: 20%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.icon1 .item1 image {
		width: 90upx;
		height: 74upx;
		margin-top: 5upx;
	}

	.icon1 .item1 i {
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;

		margin-top: 5upx;
	}

	.icon1 .item2 image {
		width: 88upx;
		height: 82upx;
	}

	.icon1 .item2 i {
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}

	.icon1 .item3 image {
		width: 102upx;
		height: 80upx;
	}

	.icon1 .item3 i {
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}

	.icon1 .item4 image {
		width: 88upx;
		height: 80upx;
	}

	.icon1 .item4 i {
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}

	.icon1 .item5 image {
		width: 76upx;
		height: 78upx;
	}

	.icon1 .item5 i {
		width: 48upx;
		height: 25upx;
		font-size: 24upx;
		font-family: Microsoft YaHei Regular;
		color: #333333;
	}

	.icon1 navigator {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 图标区域2 */
	.icon2 {
		margin-left: 29upx;

		width: 691upx;
		background: #fff;
		box-shadow: -0.419px 5.985px 9px 0px rgba(221, 222, 224, 0.48);
		margin-top: 30upx;
	}

	.icon2 .list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
	}

	.list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		max-width: 25%;
		min-width: 25%;
		margin-bottom: 30upx;
	}
	.icon3 .list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		max-width: 25%;
		min-width: 25%;
		margin-bottom: 30upx;
	}

	.list .item navigator {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.icon2 .bibei {
		float: left;
		width: 100%;
		height: 50upx;
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: #333333;
		margin-left: 19upx;
		margin-top: 27upx;
	}

	.icon2 .item image {
		max-width: 100upx;
		max-height: 100upx;
	}

	.icon2 .item:nth-child(3) image,
	.icon2 .item:nth-child(4) image,
	.icon2 .item:nth-child(5) image {
		width: 50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}

	.icon2 .item:nth-child(1),
	.icon2 .item:nth-child(2) {
		margin-top: -22upx;
	}

	.icon3 .bibei {
		padding: 0 0 22upx 0
	}

	.icon3 .item:nth-child(3) image {
		width: 50upx;
		height: 50upx;
		margin-top: -22upx;
	}

	.icon3 .item:nth-child(1) image,
	.icon3 .item:nth-child(2) image,
	.icon3 .item:nth-child(5) image{
		width: 50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}

	.icon3 .item:nth-child(4),
	.icon3 .item:nth-child(6),
	.icon3 .item:nth-child(7) {
		margin-top: -22upx;
	}

	.icon3 .item:nth-child(8) image,
	.icon3 .item:nth-child(10) image {
		width: 50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}

	.icon3 .item:nth-child(9) image {
		width: 60upx;
		height: 60upx;
		margin-bottom: 22upx;
	}

	.icon3 .item:nth-child(9) text {
		width: 120upx;
	}

	.icon2 .item text {
		width: 102upx;
		height: 24upx;
		text-align: center;
		display: block;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}

	.icon2 .item2 {
		float: left;
		height: 132upx;
		width: 102upx;
	}

	.icon2 .item2 i {
		width: 72upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 71upx;
	}

	.icon2 .item3 {
		float: left;
		margin-left: 30upx;
	}

	.icon2 .item3 i {
		width: 100upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 54upx;
	}

	.icon2 .item4 {
		float: left;
		margin-left: 30upx;
	}

	.icon2 .item4 i {
		width: 100upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 56upx;
	}
	/*电商区域*/
	.icon4 {
		margin-left: 29upx;
	
		width: 691upx;
		background: #fff;
		box-shadow: -0.419px 5.985px 9px 0px rgba(221, 222, 224, 0.48);
		margin-top: 30upx;
	}
	
	.icon4 .list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
	}
	
	.icon4 .list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20%;
		max-width: 20%;
		min-width: 20%;
		margin-bottom: 30upx;
	}
	.icon3 .list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25%;
		max-width: 25%;
		min-width: 25%;
		margin-bottom: 30upx;
	}
	
	.icon4 .list .item navigator {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.icon4 .bibei {
		float: left;
		width: 100%;
		height: 50upx;
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: #333333;
		margin-left: 19upx;
		margin-top: 27upx;
	}
	
	.icon4 .item image {
		max-width: 100upx;
		max-height: 100upx;
	}
	
	.icon4 .item:nth-child(1) image,
	.icon4 .item:nth-child(2) image,
	.icon4 .item:nth-child(3) image,
	.icon4 .item:nth-child(4) image,
	.icon4 .item:nth-child(5) image {
		width: 50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}
	
	/* .icon4 .item:nth-child(1),
	.icon4 .item:nth-child(2) {
		margin-top: -22upx;
	} */
	
	.icon3 .bibei {
		padding: 0 0 22upx 0
	}
	
	.icon3 .item:nth-child(3) image {
		width: 50upx;
		height: 50upx;
		margin-top: -22upx;
	}
	
	.icon3 .item:nth-child(1) image,
	.icon3 .item:nth-child(2) image,
	.icon3 .item:nth-child(5) image {
		width: 50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}
	
	.icon3 .item:nth-child(4),
	.icon3 .item:nth-child(6),
	.icon3 .item:nth-child(7) {
		margin-top: -22upx;
	}
	
	.icon3 .item:nth-child(8) image {
		width: 50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}
	
	.icon3 .item:nth-child(9) image {
		width: 60upx;
		height: 60upx;
		margin-bottom: 22upx;
	}
	
	.icon3 .item:nth-child(9) text {
		width: 120upx;
	}
	
	.icon4 .item text {
		width: 102upx;
		height: 24upx;
		text-align: center;
		display: block;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}
	
	.icon4 .item2 {
		float: left;
		height: 132upx;
		width: 102upx;
	}
	
	.icon4 .item2 i {
		width: 72upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 71upx;
	}
	
	.icon4 .item3 {
		float: left;
		margin-left: 30upx;
	}
	
	.icon4 .item3 i {
		width: 100upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 54upx;
	}
	
	.icon4 .item4 {
		float: left;
		margin-left: 30upx;
	}
	
	.icon4 .item4 i {
		width: 100upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 56upx;
	}
</style>
